<template>
  <view class="content">
    <!-- <image
      class="logo"
      src="/static/logo.png"
    ></image> -->
    <view>
      <button type="success" size="default" shape="circle" @click="wxLogin">
        授权登录
      </button>
      <button open-type="getPhoneNumber" @getphonenumber="getUserPhone">
        微信手机号登录
      </button>
      <button hover-class="button-hover" @click="getAuth">
        授权后的获取信息
      </button>
    </view>
    <view>
      <text class="title">{{ title }}</text>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="true">
      <view>
        <view class="header">
          <image src="../../static/logo.png"></image>
        </view>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isCanUse: false,
      title: 'Hello',
    }
  },
  async onLoad() {
    var a = await uni.checkSession()
    console.log('检查checkSession')
    console.log(a)
  },
  methods: {
    getAuth() {
      this.$http.get('/api/test').then((res) => {
        console.log('请求test')
        console.log(res)
      })
    },
    getUserPhone(e) {
      // 获取code 小程序专有，用户登录凭证。
      uni.login({
        provider: 'weixin',
        success(login) {
          console.log(login)
        },
      })
      console.log('获取手机号码')
      console.log(e)
      console.log('获取手机号码')
      //手机号加密数据
      if (e.detail.errMsg == 'getPhoneNumber:ok') {
        // 获取 encryptedData 与 iv 传给后台进行解析
        console.log(e)
        //传给后端的参数
        let data = {
          session_key: '后端返回微信 openid ',
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
        }
      } else {
        this.$operate.toast({
          title: '授权失败无法登录！',
        })
      }
    },
    wxGetUserProfile: function () {
      return new Promise((resolve, reject) => {
        //uniapp4月更新了这个方法getUserProfile，用getUserinfo无法弹出授权窗口
        uni.getUserProfile({
          lang: 'zh_CN',
          desc: '获取你的昵称、头像、地区及性别',
          success: (res) => {
            resolve(res)
            console.log(res)
            console.log(1234)
            // res.encryptedData,
            // res.iv
          },
          // 失败回调
          fail: (err) => {
            reject(err)
          },
        })
      })
    },
    wxSilentLogin: function () {
      return new Promise((resolve, reject) => {
        uni.login({
          success(res) {
            //这里就是code，可以打印看下
            resolve(res.code)
          },
          fail(err) {
            reject(err)
          },
        })
      })
    },
    wxLogin(e) {
      let p1 = this.wxSilentLogin()
      console.log(p1)
      console.log('=====`')
      let p2 = this.wxGetUserProfile()
      console.log('=====')
      p1.then((code) => {
        return code
      })
        .then((code) => {
          return new Promise((resolve, reject) => {
            p2.then((res) => {
              resolve({
                code,
                iv: res.iv,
                encryptedData: res.encryptedData,
                rawData: res.rawData,
                signature: res.signature,
              })
            }).catch((err) => {
              console.error('在p2请求出错啦')
              console.log(err)
              reject(err)
            })
          })
        })
        .then((res) => {
          const accountInfo = wx.getAccountInfoSync() // 动态获取小程序 appid
          // console.log(accountInfo);
          // console.log("2222222222");
          // 用接口拉取信息（因为后端需要你的appid来获取数据，所以你需要动态获取appid）
          this.$http
            .post('/login', {
              code: res.code,
              iv: res.iv,
              encryptedData: res.encryptedData,
              appId: accountInfo.miniProgram.appId,
              rawData: res.rawData,
              signature: res.signature,
            })
            .then((re) => {
              console.log('请求成功了')
              console.log(re)
              const data = re

              console.log(data)
            })
            .catch((e) => {
              console.log('请求报错了')
              console.log(e)
              console.log('请求报错了')
            })
        })
        .catch((err) => {
          console.log('p1报错了')
          console.log(err)
        })
    },
  },
}
</script>

<style>
.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
